<template>
  <div>
    <div class="top">
      <div style="margin:50px 20px">
        设备号：
      </div>
      <div class="time">
        <div style="height:30px;margin-top:30px;margin-left:103px">
          维修时长：
        </div>

        <!-- 计时 -->
        <div class="fathere">
          <ul style="margin:-35px 32px;font-size: 25px;">
            <li>{{one}}<span>:</span></li>
            <li>{{two}}<span>:</span></li>
            <li>{{three}}</li>
          </ul>
          <button type="primary"
                  @click="startHandler"
                  style="margin:55px 1px;">开始</button>
          <button type="primary"
                  @click="endHandler">暂停</button>
          <br>
          <button style="margin-left: -31px;margin-top:-9px;display:flex;"
                  @click="wancheng">完成维修</button>
          <!-- <button style="margin-left: 50px;margin-top:-22px;display:flex;">中断维修</button> -->
        </div>

      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      flag: null,
      one: '00', // 时
      two: '00', // 分
      three: '00', // 秒
      abc: 0, // 秒的计数
      cde: 0, // 分的计数
      efg: 0 // 时的计数
    }
  },
  props: {
    msg: String
  },
  mounted() {},
  methods: {
    // 开始计时
    startHandler() {
      this.flag = setInterval(() => {
        if (this.three === 60 || this.three === '60') {
          this.three = '00'
          this.abc = 0
          if (this.two === 60 || this.two === '60') {
            this.two = '00'
            this.cde = 0
            if (this.efg + 1 <= 9) {
              this.efg++
              this.one = '0' + this.efg
            } else {
              this.efg++
              this.one = this.efg
            }
          } else {
            if (this.cde + 1 <= 9) {
              this.cde++
              this.two = '0' + this.cde
            } else {
              this.cde++
              this.two = this.cde
            }
          }
        } else {
          if (this.abc + 1 <= 9) {
            this.abc++
            this.three = '0' + this.abc
          } else {
            this.abc++
            this.three = this.abc
          }
        }
      }, 100)
    },
    // 暂停计时
    endHandler() {
      this.flag = clearInterval(this.flag)
    },
    wancheng() {
      this.$router.push('/Submit')
    }
  }
}
</script>
<style>
.top {
  height: 500px;
  width: 100%;
  flex-direction: row;
  border: #ccc 1px solid;
}
.time {
  height: 300px;
  width: 300px;
  display: flex;
  border: #ccc 1px solid;
  margin: 0 auto;
  justify-content: center;
  /* align-items: center; */
}
.fathere {
  margin-top: 100px;
  margin-left: -95px;
  height: 100%;
  width: 200px;
}
</style>